<template>
  <div class="dis-flex search-box sbw alc drag">

    <n-popover placement="bottom-start" trigger="click" class="custom-popover" :show-arrow="false">
      <template #trigger>
        <n-input
          v-model="searchValue"
          style="flex: 1;"
          placeholder="搜索"
          size="small"
          class="no-drag"
        >
          <template #prefix>
            <svg-icon name="search" color="#cecec5" />
          </template>
        </n-input>
      </template>

      <search-popover />
    </n-popover>
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from "vue";
import SearchPopover from "./searchPopover.vue";

const searchValue = ref('')
</script>

<style lang="scss" scoped>
.search-box {
  height: 64px;
  padding: 20px 10px 10px;
  background-color: #f7f7f7;
}
:deep(.n-input) {
  background-color: #eaeaea;
}
:deep(.n-button) {
  padding: 0 5px;
  background-color: #eaeaea;
}
</style>
